<template>
  <div class="main">
    <up-load />
    <p class="nickName"><span>昵称:</span> <input type="text" /></p>
    <p class="Metext">
      <span>签名: </span> <span contenteditable="true" class="input"></span>
    </p>
    <button class="btn">确定</button>
  </div>
</template>

<script>
import upLoad from "@/components/upLoad.vue";
export default {
  components: { upLoad },
};
</script>

<style scoped>
.main {
  padding: 30px;
  text-align: center;
}
.nickName input {
  padding: 5px 10px;
  outline: none;
  border: 1px solid #000;
  border-radius: 6px;
  width: 80%;
  transition: 0.5s;
}
.nickName {
  margin: 20px 0;
}
.nickName span{
  margin-right: 6px;
}
.nickName input:focus {
  border: 1px solid #4cc3ff;
}
.Metext{
  display: flex;
  justify-content: center;
}
.Metext span:nth-child(1){
  margin-right: 8px;
}
.Metext span:nth-child(2) {
  display: inline-block;
  padding: 5px 10px;
  outline: none;
  width: 80%;
  height: 100px;
  border: 1px solid #000;
  border-radius: 6px;
  text-align: left;
  transition: 0.5s;
  overflow: auto;
}
.Metext span:focus {
  border: 1px solid #4cc3ff;
}
.btn{
  margin-top: 30px;
  padding: 10px 30px;
  font-size: 16px;
  background: #fff; 
  border:1px solid #4cc3ff;
  color: #4cc3ff;
  border-radius: 10px;
}
</style>